<template>
  <div class="page-login">
    <span class="login-ornament" v-for="_n in 21"></span>
    <div class="login-form-box">
      <h3 class="login-form-title">后台管理系统登录</h3>
      <nt-form
        :model="formFields"
        :rules="rules"
        class="login-form"
        @submit="handleSubmit"
      >
        <nt-form-item name="username" class="form-row">
          <nt-input
            placeholder="请输入用户名"
            v-model="formFields.username"
          ></nt-input>
        </nt-form-item>
        <nt-form-item name="password" class="form-row">
          <nt-input
            placeholder="请输入密码"
            v-model="formFields.password"
          ></nt-input>
        </nt-form-item>
        <nt-form-item class="form-row">
          <nt-button type="primary" html-type="submit" block class="submit-btn">
            提交
          </nt-button>
        </nt-form-item>
      </nt-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const formFields = ref({
  username: "",
  password: "",
});
const rules = [
  {
    key: "username",
    rules: ["required"],
    message: "用户名不能为空",
  },
  {
    key: "password",
    rules: [/^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]{6,15})$/],
    message: "密码为6~15位字母+数字",
  },
];

function handleSubmit() {
  console.log(formFields.value);
}
</script>

<style lang="less">
.page-login {
  --nt-form-edit-height: 40px;
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #3e1e68;
  overflow: hidden;

  .login-ornament {
    width: 20vmin;
    height: 20vmin;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    animation: ornament-move-frame;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    color: #ffacac;
    box-shadow: -40vmin 0 5vmin currentColor;

    &:nth-child(1) {
      top: 90%;
      left: 47%;
      animation-duration: 8s;
      animation-delay: -17s;
      transform-origin: 2vw 17vh;
    }

    &:nth-child(2) {
      top: 31%;
      left: 5%;
      animation-duration: 40s;
      animation-delay: -14s;
      transform-origin: -5vw -14vh;
    }

    &:nth-child(3) {
      top: 18%;
      left: 62%;
      animation-duration: 20s;
      animation-delay: -5s;
      transform-origin: -18vw -12vh;
    }

    &:nth-child(4) {
      top: 71%;
      left: 45%;
      animation-duration: 30s;
      animation-delay: -2s;
      transform-origin: -4vw -20vh;
    }

    &:nth-child(5) {
      color: #e45a84;
      top: 90%;
      left: 38%;
      animation-duration: 15s;
      animation-delay: -48s;
      transform-origin: 7vw -9vh;
    }

    &:nth-child(6) {
      color: #583c87;
      top: 34%;
      left: 32%;
      animation-duration: 30s;
      animation-delay: -36s;
      transform-origin: -6vw -15vh;
    }

    &:nth-child(7) {
      color: #583c87;
      top: 25%;
      left: 41%;
      animation-duration: 21s;
      animation-delay: -47s;
      transform-origin: -10vw -5vh;
    }

    &:nth-child(8) {
      color: #e45a84;
      top: 16%;
      left: 39%;
      animation-duration: 30s;
      animation-delay: -33s;
      transform-origin: -15vw 3vh;
    }

    &:nth-child(9) {
      color: #583c87;
      top: 42%;
      left: 55%;
      animation-duration: 46s;
      animation-delay: -50s;
      transform-origin: -6vw 25vh;
    }

    &:nth-child(10) {
      color: #e45a84;
      top: 78%;
      left: 25%;
      animation-duration: 44s;
      animation-delay: -21s;
      transform-origin: -4vw -12vh;
    }

    &:nth-child(11) {
      color: #e45a84;
      top: 73%;
      left: 77%;
      animation-duration: 41s;
      animation-delay: -40s;
      transform-origin: 21vw -11vh;
    }

    &:nth-child(12) {
      color: #e45a84;
      top: 48%;
      left: 81%;
      animation-duration: 33s;
      animation-delay: -42s;
      transform-origin: 6vw 19vh;
    }

    &:nth-child(13) {
      color: #e45a84;
      top: 77%;
      left: 7%;
      animation-duration: 25s;
      animation-delay: -1s;
      transform-origin: 15vw 24vh;
    }

    &:nth-child(14) {
      color: #e45a84;
      top: 77%;
      left: 38%;
      animation-duration: 51s;
      animation-delay: -40s;
      transform-origin: -1vw -13vh;
    }

    &:nth-child(15) {
      color: #583c87;
      top: 58%;
      left: 98%;
      animation-duration: 7s;
      animation-delay: -1s;
      transform-origin: -19vw -20vh;
    }

    &:nth-child(16) {
      color: #583c87;
      top: 79%;
      left: 31%;
      animation-duration: 39s;
      animation-delay: -46s;
      transform-origin: 14vw 21vh;
    }

    &:nth-child(17) {
      color: #e45a84;
      top: 41%;
      left: 74%;
      animation-duration: 37s;
      animation-delay: -4s;
      transform-origin: -19vw 3vh;
    }

    &:nth-child(18) {
      color: #583c87;
      top: 56%;
      left: 34%;
      animation-duration: 26s;
      animation-delay: -35s;
      transform-origin: -16vw -7vh;
    }

    &:nth-child(19) {
      color: #583c87;
      top: 84%;
      left: 2%;
      animation-duration: 14s;
      animation-delay: -39s;
      transform-origin: -10vw -6vh;
    }

    &:nth-child(20) {
      color: #e45a84;
      top: 61%;
      left: 39%;
      animation-duration: 21s;
      animation-delay: -36s;
      transform-origin: 14vw 9vh;
    }

    &:nth-child(21) {
      color: #e45a84;
      top: 33%;
      left: 5%;
      animation-duration: 8s;
      animation-delay: -7s;
      transform-origin: 4vw 2vh;
    }
  }

  .login-form-box {
    width: 320px;
    background-color: rgba(0, 0, 0, 0.24);
    border-radius: 6px;
    padding: 20px 32px;
    z-index: 1;
  }

  .login-form-title {
    font-size: 22px;
    color: #fff;
    text-align: center;
    margin-bottom: 40px;
    font-weight: 500;
    letter-spacing: 5px;
  }

  .nt-form-item {
    margin-bottom: 30px;
  }

  .submit-btn {
    background: linear-gradient(to right, #aa55ff, #e45a84);
    border: none;

    &:hover {
      background: linear-gradient(
        to right,
        lighten(#aa55ff, 3%),
        lighten(#e45a84, 3%)
      );
    }

    &:active {
      background: linear-gradient(
        to right,
        darken(#aa55ff, 3%),
        darken(#e45a84, 3%)
      );
    }
  }
}

/* 动态背景 */
@keyframes ornament-move-frame {
  100% {
    transform: translate3d(0, 0, 1px) rotate3d(0, 0, 1, 360deg);
  }
}
</style>
